<template>
  <MyVanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <!-- <van-nav-bar :title="personName" left-arrow :right-text="origin!='resume'?'看TA简历':''" fixed @click-left="onClickLeft" @click-right="onClickRight" /> -->
        <van-nav-bar
          :title="personName"
          left-arrow
          right-text="查看简历"
          fixed
          @click-left="onClickLeft"
          @click-right="resumeClick()"
        />
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="note-window">
          <!-- 谨防上当 start -->
          <div v-if="showTip" class="caution" style="display: ">
            <span>网上聊天谨防上当受骗，进一步沟通以面试或电话为准。</span>
            <van-icon
              name="clear"
              size="16"
              color="#fff"
              @click="showTip = false"
            />
          </div>
          <!-- 谨防上当 end -->

          <!-- 聊天框 -->
          <div class="window" ref="middle">
            <div v-for="(item, index) in messageList" :key="index">
              <!-- 个人 -->
              <div class="info person" v-if="item.isFromPerson">
                <img
                  class="avatar"
                  :src="item.fromUserLogo"
                  alt=""
                  width="40"
                  height="40"
                  @click="resumeClick()"
                />

                <!-- 附件简历 -->
                <div class="annex" v-if="true">
                  <p>
                    <span>我的附件简历</span>
                    <span>128k</span>
                    <!--这里是附件存储大小-->
                  </p>
                  <p>
                    <span>点击预览附件简历</span>
                  </p>
                </div>

                <div class="bubble" v-else>
                  <span>{{ item.msg }}</span>
                </div>

                <div class="sub">
                  <span class="time">{{ item.dateStr }}</span>
                </div>
              </div>

              <!-- 企业 -->
              <div class="info firm" v-if="item.isFromCompany">
                <img class="avatar" :src="item.fromUserLogo" alt="" />
                <div class="bubble">
                  <span>{{ item.msg }}</span>
                </div>
                <div class="sub">
                  <span class="time">{{ item.dateStr }}</span>
                  <!-- <span class="state">已读</span> -->
                </div>
              </div>

              <!-- 系统 -->
              <div
                :class="{
                  info: true,
                  person: item.toUserType == 'C',
                  firm: item.toUserType == 'P',
                }"
                v-if="item.isFromAdmin || item.isFromKF"
              >
                <img class="avatar" :src="item.fromUserLogo" alt="" />
                <div class="bubble">
                  <span>{{ item.msg }}</span>
                </div>
                <div class="sub">
                  <span class="time">{{ item.dateStr }}</span>
                  <!-- <span class="state">已读</span> -->
                </div>
              </div>
            </div>
          </div>

          <!-- 内容输入 -->
          <div class="input">
            <p @click="popupShowCyy = true">
              <van-icon name="comment-circle-o" size="28" color="#07f" />
            </p>
            <p>
              <van-field
                v-model="newMessage.messageText"
                rows="1"
                autosize
                type="textarea"
                placeholder="新消息"
                class="textarea"
              />
            </p>
            <p style="display: ">
              <van-button
                color="#07f"
                type="primary"
                text="发送"
                style="
                  height: 36px;
                  padding: 0 12px;
                  border: 0;
                  border-radius: 6px;
                  font-size: 16px;
                  line-height: 36px;
                "
                @click="sendNewMsg"
              ></van-button>
            </p>
            <p @click="popupShowMore = true" v-if="false">
              <van-icon name="add-o" size="28" color="#666" />
            </p>
          </div>

          <!-- 更多方式 -->
          <van-popup
            v-model="popupShowMore"
            round
            position="bottom"
            class="mode"
          >
            <ul>
              <li>
                <img src="@/assets/img/note/photo_icon.png" alt="" />
                <span>拍照</span>
              </li>
              <li>
                <img src="@/assets/img/note/pic_icon.png" alt="" />
                <span>图片</span>
              </li>
              <li>
                <img src="@/assets/img/note/position_icon.png" alt="" />
                <span>定位</span>
              </li>
            </ul>
            <p>关闭</p>
          </van-popup>

          <!-- 常用语 -->
          <van-popup
            v-model="popupShowCyy"
            round
            position="bottom"
            class="useful"
          >
            <ul class="setting">
              <li v-for="(item, index) in cyyList" :key="index">
                <span @click="sendByCyy(item)">{{ item }}</span>
                <van-icon
                  name="edit"
                  color="#888"
                  v-show="buttonShowCyySet"
                  @click="editCyy(index)"
                />
                <van-icon
                  name="delete-o"
                  color="#888"
                  v-show="buttonShowCyySet"
                  @click="delCyy(index)"
                />
              </li>
            </ul>
            <p>
              <span @click="popupShowCyy = false">关闭</span>
              <span @click="popupShowCyyAdd = true">+ 添加常用语</span>
              <span @click="buttonShowCyySet = !buttonShowCyySet">{{
                buttonShowCyySet ? "取消" : "设置"
              }}</span>
            </p>
          </van-popup>

          <!-- 编辑常用语 -->
          <van-popup v-model="popupShowCyyAdd" class="useful-edit">
            <b>添加常用语</b>
            <p>
              <van-field
                v-model="cyyWord"
                rows="5"
                autosize
                show-word-limit
                type="textarea"
                placeholder="输入您的常用回复"
                class="textarea"
                maxlength="200"
              />
            </p>
            <p>
              <van-button
                round
                type="primary"
                text="保存"
                class="btn"
                @click="saveCyy"
              ></van-button>
              <van-button
                round
                type="primary"
                text="发送"
                class="btn"
                @click="sendByCyy(cyyWord)"
              ></van-button>
            </p>
          </van-popup>
        </div>
        <!-- 内容 end -->
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { NavBar, Icon, Field, Button, Popup, Toast } from "vant";
import MyVanskeleton from "@/components/MyVanskeleton.vue";
import { addCompanyChangYongYu, getCompanyChangYongYu } from "@/util/session";
import Global from "@/Global";
import myJmessage from "@/util/myJmessage";
import { mixin_person_toJobCompany, mixin_common } from "@/mixin/mixins";
export default {
  name: "LivePlay",
  components: {
    MyVanskeleton,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Button.name]: Button,
    [Popup.name]: Popup,
  },
  mixins: [mixin_person_toJobCompany, mixin_common],
  // 定义属性
  data() {
    return {
      skeletonLoading: true,
      showTip: true,
      //params
      cid: "",
      personID: "",
      origin: "", //resume or conversationlist
      //personName
      personName: "",
      sex: "",
      companyLogo: "",
      personLogo: "",
      //message list
      messageList: [],
      shortMessageList: [],
      //new
      newMessage: {
        isFromCompany: true,
        cid: "",
        toUserID: "",
        messageText: "",
      },
      //changyongyu
      cyyList: getCompanyChangYongYu(),
      cyyWord: "",
      cyyEditIndex: -1, //edit :index!=-1, add:index ==-1
      popupShowCyy: false,
      popupShowCyyAdd: false,
      buttonShowCyySet: false,

      //more send way
      popupShowMore: false,
    };
  },
  watch: {
    cyyList() {
      addCompanyChangYongYu(this.cyyList);
    },
  },
  mounted() {
    this.cid = this.$route.query.cid;
    this.personID = this.$route.query.personID;
    this.origin = this.$route.query.origin;
    this.newMessage.cid = this.cid;
    this.newMessage.toUserID = this.personID;
    this.getMessageList();
    //收到聊天消息
    this.$bus.$on(Global.bus_company_im_message_receive_InsidePage, () => {
      this.getMessageList();
    });
  },
  beforeDestroy() {
    this.$bus.$off(Global.bus_company_im_message_receive_InsidePage);
    this.$bus.$off(Global.bus_company_im_sendmessage);
  },
  // 方法集合
  methods: {
    getMessageList() {
      this.$api
        .get("/CompanyIM/GetCompanyMessageList", { cid: this.cid })
        .then((res) => {
          this.skeletonLoading = false;
          if (res.success) {
            this.personName = res.response.personName;
            this.sex = res.response.sex;
            this.personLogo = res.response.personLogo;
            this.companyLogo = res.response.companyLogo;
            this.messageList = res.response.messageList;
            this.$nextTick(() => {
              let middle = this.$refs["middle"];
              if (middle) {
                // console.log(middle.scrollHeight);
                middle.scrollTop = middle.scrollHeight;
              }
            });
            //已读聊天详情页
            this.$bus.$emit(Global.bus_company_im_message_read);
          }
        });
    },
    sendNewMsg() {
      this.$api
        .post("/CompanyIM/SendMessageByCompany", this.newMessage)
        .then((res) => {
          if (res.success) {
            this.getMessageList();
            this.$bus.$emit(Global.bus_company_im_sendmessage);
            let text = this.newMessage.messageText;
            this.newMessage.messageText = "";
            this.$chathub.sendHubMsg(this.personID, text);
            //jim send message
            // myJmessage.sendMessage(this.newMessage.toUserID, text);
          } else {
            Toast.fail(res.msg);
          }
        });
    },
    sendByCyy(txt) {
      this.newMessage.messageText = txt;
      this.cyyWord = txt;
      this.saveCyy();
      this.popupShowCyy = false;
      this.sendNewMsg();
    },
    saveCyy() {
      if (this.cyyWord.trim() == "") {
        Toast("常用语不能为空");
        return;
      }
      if (this.cyyEditIndex == -1) {
        //add
        this.cyyList.push(this.cyyWord);
      } else {
        //edit
        this.cyyList.splice(this.cyyEditIndex, 1, this.cyyWord);
      }
      this.popupShowCyyAdd = false;
    },
    editCyy(index) {
      this.cyyEditIndex = index;
      this.popupShowCyyAdd = true;
      this.cyyWord = this.cyyList[index];
    },
    delCyy(index) {
      this.cyyList.splice(index, 1);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      if (this.origin != "resume") {
        this.$router.push({
          name: "company-resume-info",
          query: { origin: 0, personID: this.personID },
        });
      }
    },
    //监听个人发送的聊天消息
    onMsgReceive() {
      myJmessage.jim.onMsgReceive((data) => {
        console.log("jim onMsgReceive:window vue ");
        this.getMessageList();
      });
    },
    resumeClick(item, index) {
      this.$router.push({
        name: "company-resume-info",
        query: { personID: this.personID },
      });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>